<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击我</button>
    <div></div>
    <input type="text">
    <div id="two" style="width: 100px;height: 100px">
        我是块级元素
    </div>
    <script>
        // 存放js代码 
        // 1.获取button按钮 和div标签
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var input = document.querySelector('input');
        var div2 = document.getElementById('two');
        console.log(btn,div);
        // 2.给button按钮绑定单击事件
        /**
         * dom0级事件绑定需要使用关键字on  on事件类型 = 事件处理程序 
        */
        btn.ondblclick = function(){
            // innerHTML 表示div的元素内容 
            div.innerHTML = '我是一个div';
            div.style.width = '100px';
            div.style.height = '100px';
            div.style.backgroundColor = 'red'
        }
        // 键盘事件 
        input.onkeyup = function(){
            console.log('键盘抬起了')
        }
        input.onkeydown = function(){
            console.log('键盘按下了')
        }
        input.onkeypress = function(){
            console.log('键盘持续按下')
        }

        // 鼠标移入事件 
        div2.onmouseenter = function(){
            div2.style.backgroundColor = 'pink'
        }
        // 鼠标移出事件 
        div2.onmouseleave = function(){
            div2.style.backgroundColor = 'orange'
        }
    </script>
</body>
</html>